<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.7/angular.js"></script>
    
</head>
<body ng-app="myapp">
<table class="table table-striped" ng-controller="itemController">
    <tr><th>序号</th><th>品名</th><th>价格</th><th>选择</th><th>操作</th><th ng-show="showOption()">可选择项</th></tr>
    <tr ng-repeat="item in items">
        <td>{{$index}}</td><td>{{item.title}}</td><td>{{item.price|currency}}</td>
        <td>{{item.selected?"选中":"未选中"}}</td>
        <td><button ng-click=remove($index)>删除</button>
        <button class="modify" ng-click="modify($index)">修改</button></td>
        <td ng-show="item.show"><input  ng-model="item.price"><button ng-click="confirm($index)">确定</button></td>
    </tr>
</table>
请选择商品:

<ul  ng-controller="cartController">
    <ii ng-repeat="item in items">
        <input type="checkbox" ng-model="item.selected">{{item.title}}
    </ii>
</ul>

<script>

    var items=[{title:"电脑",price:5000,show:true,selected:false},{title:"手机",price:3000,show:false,selected:false}
        ,{title:"水杯",price:45,show:false,selected:true}];

    var myapp=angular.module("myapp",[]);

    myapp.controller("itemController",function($scope){
        $scope.items=items;
        $scope.remove=function(index){
            items.splice(index,1);
        };
        $scope.modify=function(index){
            items[index].show=true;
        };
        $scope.confirm=function(index){
            items[index].show=false;
        };
        $scope.showOption=function(){
            for(var i=0;i<items.length;i++){
                if(items[i].show) return true;
            }
            return false;
        };

    });
    //单模块,多控制器
    myapp.controller("cartController",function($scope){
        $scope.items=items;

    });





</script>
</body>
</html>